<comment>
  # 首页
</comment>
<template>
  <div class="yoyo-home-container">
    <el-row class="row-bg" gutter="10">
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="left-card" style="height: 100%; width: 100%">
          <div class="avatar-image">
            <img class="user-image" src="@/assets/image/avatar.png" alt="">
            <div class="user-info">
              <div class="username common">昵称：小香菜今天吃什么</div>
              <div class="job common">职位：前端开发工程师</div>
              <div class="company common">公司：xxxx技术股份有限公司</div>
              <div class="age common">年龄：不~方便~透露~啦~</div>
              <div class="gender common">性别：小仙女一枚哦~😘😘</div>
              <div class="address common">地址：地球上的某个小角落...</div>
              <div class="email common">邮箱：1098646213@qq.com</div>
              <div class="weChat common">微信：sokach9200</div>
              <div class="technology common">技术栈：HTML、CSS、JavaScript、Vue</div>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="today-task">
            <div class="today-title">
              <h2 class="title">每日任务 📅</h2>
            </div>
            <div class="task common">
              <div class="task-icon">📝</div>
              <div class="task-description">不要等待运气降临，应该去努力掌握知识。</div>
            </div>
            <div class="task common">
              <div class="task-icon">📝</div>
              <div class="task-description">在今天和明天之间，有一段很长的时间；趁你还有精神的时候，学习迅速地办事。</div>
            </div>
            <div class="task common">
              <div class="task-icon">📝</div>
              <div class="task-description">构成我们学习最大障碍的是已知的东西，而不是未知的东西。</div>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="great-wish">
            <div class="wish-title">
              <h2>美好祈愿 💌</h2>
            </div>
            <div class="wish-description">要学会开心呐~</div>
          </div>
          <el-divider></el-divider>
          <div class="advert-container">
            <div class="advert-title">
              <h2>广告 📢</h2>
            </div>
            <advert/>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="18">
        <el-row class="target" gutter="10">
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="right-top-card">
              <div class="target-title">
                <div class="title">访问量</div>
              </div>
              <div class="target-card">
                <div class="target-number">8,349,805</div>
                <div class="target-percent">
                  <div class="target-tomorrow">比昨天 <span class="green-arrow">0.12</span></div>
                  <div class="target-week">比七日 <span class="red-arrow">0.03</span></div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="right-top-card">
              <div class="target-title">
                <div class="title">关注度</div>
              </div>
              <div class="target-card">
                <div class="target-number">3,487,548</div>
                <div class="target-percent">
                  <div class="target-tomorrow">比昨天 <span class="green-arrow">0.18</span></div>
                  <div class="target-week">比七日 <span class="red-arrow">0.05</span></div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="right-top-card">
              <div class="target-title">
                <div class="title">接入量</div>
              </div>
              <div class="target-card">
                <div class="target-number">1,633,485</div>
                <div class="target-percent">
                  <div class="target-tomorrow">比昨天 <span class="green-arrow">0.02</span></div>
                  <div class="target-week">比七日 <span class="red-arrow">0.03</span></div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="echarts-middle" gutter="10">
          <el-col :xs="24" :sm="24" :lg="16">
            <LineUnitePie style="margin-bottom: 10px;" height="400px" width="100%"/>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="8">
            <Polar style="margin-bottom: 10px;" height="400px" width="100%"/>
          </el-col>
        </el-row>
        <el-row class="echarts-bottom">
          <BarAdd height="424px" width="100%"/>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineUnitePie from '../echarts/unite/LineUnitePie.vue'
import Polar from '../echarts/simple/components/polar.vue'
import BarAdd from '../echarts/simple/components/barAdd.vue'
import advert from '@/components/advert'
export default {
  name: 'index',
  components:{
    LineUnitePie,
    Polar,
    BarAdd,
    advert
  }
}
</script>

<style lang="scss" scoped>
.yoyo-home-container{
  .user-image{
    width: 80px;
    height: 80px;
    border-radius: 80px;
    margin-top: 10px;
  }
  .user-info{
    text-align: left;
    margin-left: 30px;
    color: $fontColor;
  }
  .common{
    margin-top: 10px;
  }
  .today-task{
    text-align: left;
    margin-left: 30px;
    color: $fontColor;
  }
  .task{
    display: flex;
  }
  .great-wish{
    text-align: left;
    margin-left: 30px;
    color: $fontColor;
    margin-bottom: 20px;
  }
  .advert-container{
    text-align: left;
    margin-left: 30px;
    color: $fontColor;
    margin-bottom: 20px;
  }

  .right-top-card{
    width: 100%;
    height: 100%;
    color: $fontColor;
    margin-bottom: 10px;
  }
  .target-title{
    border-bottom: 1px solid $greyColor;
    .title{
      font-size: 16px;
      padding: 15px 20px 5px;
    }
  }
  .target-card{
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    height: 40px;
    .target-number{
      line-height: 40px;
      font-size: 24px;
    }
    .target-tomorrow{
      margin-bottom: 3px;
    }
    .green-arrow{
     position: relative;
      margin-left: 20px;
      color: #49bb7a;
      &::before{
        content:"";
        width:0;
        height:0;
        position: absolute;
        top: 4px;
        left: -14px;
        border-right:solid 6px transparent;
        border-left:solid 6px transparent ;
        border-bottom:solid 8px #49bb7a;
      }
    }
    .red-arrow{
      position: relative;
      margin-left: 20px;
      color: #e45f5d;
      &::before{
        content:"";
        width:0;
        height:0;
        position: absolute;
        top: 4px;
        left: -14px;
        border-right:solid 6px transparent;
        border-left:solid 6px transparent ;
        border-top:solid 8px #e45f5d;
      }
    }
  }
}
</style>
<style lang="scss">
.right-top-card .el-card__body{
  padding: 0 !important;
}
</style>
